<template>
  <n-card :segmented="{ content: true }" :bordered="false" size="small" style="height: 100%">
    <template #header>
      <n-button type="info" ghost icon-placement="left" @click="packHandle">
        <template #icon>
          <div class="flex items-center">
            <n-icon size="14">
              <AlignLeftOutlined />
            </n-icon>
          </div>
        </template>
        全部{{ expandedKeys.length ? '收起' : '展开' }}
      </n-button>
    </template>
    <div class="w-full menu" style="white-space: nowrap">
      <n-tree
        ref="treeRef"
        block-line
        :data="treeData"
        :expanded-keys="expandedKeys"
        :key-field="treeProps.key"
        :label-field="treeProps.label"
        :children-field="treeProps.children"
        :checkable="false"
        @update:selected-keys="selectedTree"
        @update:expanded-keys="onExpandedKeys"
        style="max-height: 650px; overflow: hidden"
      />
    </div>
  </n-card>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { AlignLeftOutlined } from '@vicons/antd';
  import { getOrgTree } from '@/api/business/org';

  // 定义组件属性
  interface TreeProps {
    key: string;
    label: string;
    children: string;
  }

  // 定义事件
  const emit = defineEmits<{
    (e: 'hide'): void;
    (e: 'set', id: string, name: string): void;
    (e: 'reload'): void;
    (e: 'loaded'): void;
  }>();

  // 响应式数据
  const treeRef = ref();
  const selectedKeys = ref<string[]>([]);
  const expandedKeys = ref<string[]>([]);
  const treeData = ref<any[]>([]);

  // 根据实际数据结构调整字段映射
  const treeProps: TreeProps = {
    key: 'orgId', // 使用 orgId 作为节点的 key
    label: 'orgNm', // 使用 orgNm 作为节点的显示文本
    children: 'child', // 使用 child 作为子节点字段
  };

  // 在组件内部实现 getTreeItem 函数
  function getTreeItem(tree: any[], key: string, field = 'orgId'): any {
    if (!tree || tree.length === 0) return undefined;

    for (const node of tree) {
      if (node[field] === key) {
        return node;
      }

      if (node.child && node.child.length > 0) {
        const found = getTreeItem(node.child, key, field);
        if (found) {
          return found;
        }
      }
    }

    return undefined;
  }

  // 转换数据结构以匹配组件要求
  function transformTreeData(data: any[]): any[] {
    return data.map((item) => {
      const transformedItem = {
        ...item,
        id: item.orgId,
        orgName: item.orgNm,
        child: item.child && item.child.length > 0 ? transformTreeData(item.child) : null,
      };
      return transformedItem;
    });
  }

  // 获取所有节点的key值用于默认展开
  function getAllNodeKeys(nodes: any[]): string[] {
    const keys: string[] = [];
    const traverse = (nodeList: any[]) => {
      nodeList.forEach((node) => {
        if (node.child && node.child.length > 0) {
          keys.push(node.orgId); // 使用 orgId 而不是 id
          traverse(node.child);
        }
      });
    };
    traverse(nodes);
    return keys;
  }

  // 加载组织机构树
  const loadOrgTree = async () => {
    try {
      const treeRes = await getOrgTree();
      // 转换数据结构以匹配组件要求
      treeData.value = Array.isArray(treeRes) ? transformTreeData(treeRes) : [];

      // 默认展开所有节点
      if (treeData.value.length > 0) {
        const allKeys = getAllNodeKeys(treeData.value);
        expandedKeys.value = allKeys;
      }

      // 如果只有一个根节点且没有子节点，隐藏组件
      if (treeData.value && treeData.value.length === 1) {
        const firstNode = treeData.value[0];
        if (!firstNode.children || firstNode.children.length === 0) {
          emit('hide');
        } else {
          // 默认选中第一个节点
          setTimeout(() => {
            selectedTree([firstNode.orgId]); // 使用 orgId 而不是 id
          }, 0);
        }
      }
      emit('loaded'); // 添加这一行，通知数据加载完成
    } catch (error) {
      console.error('加载组织机构树失败:', error);
    }
  };

  // 展开/收起所有节点
  function packHandle() {
    if (expandedKeys.value.length > 0) {
      expandedKeys.value = [];
    } else {
      // 展开所有节点
      const allKeys: string[] = [];
      const traverse = (nodes: any[]) => {
        nodes.forEach((node) => {
          allKeys.push(node.orgId); // 使用 orgId 而不是 id
          if (node.child && node.child.length > 0) {
            traverse(node.child);
          }
        });
      };
      traverse(treeData.value);
      expandedKeys.value = allKeys;
    }
    // 更新树的展开状态
    if (treeRef.value) {
      treeRef.value.setExpandedKeys(expandedKeys.value);
    }
  }

  // 处理树节点选择
  function selectedTree(keys: string[]) {
    if (keys.length > 0) {
      // 使用 orgId 字段查找节点，而不是 id
      const selectedNode = getTreeItem(treeData.value, keys[0], 'orgId');
      if (selectedNode) {
        selectedKeys.value = keys;
        // 发出 set 事件，传递 orgId 和 orgNm
        emit('set', selectedNode.orgId, selectedNode.orgNm);
        emit('reload');
      }
    }
  }

  // 处理展开节点变化
  function onExpandedKeys(keys: string[]) {
    expandedKeys.value = keys;
  }

  // 获取根节点ID的方法
  function getRootNodeId() {
    
    if (treeData.value && treeData.value.length > 0) {
      return treeData.value[0][treeProps.key]; // 返回第一个根节点的orgId
    }
    return null;
  }

  // 获取根节点名称的方法
  function getRootNodeName() {
    if (treeData.value && treeData.value.length > 0) {
      return treeData.value[0][treeProps.label]; // 返回第一个根节点的orgNm
    }
    return null;
  }

  // 组件挂载时加载数据
  onMounted(() => {
    loadOrgTree();
  });

  // 暴露方法给父组件
  defineExpose({
    setExpandedKeys: (keys: string[]) => {
      expandedKeys.value = keys;
      if (treeRef.value) {
        treeRef.value.setExpandedKeys(keys);
      }
    },
    toArray: () => {
      // 模拟原来的 toArray 方法
      const result: any[] = [];
      const traverse = (nodes: any[]) => {
        nodes.forEach((node) => {
          result.push(node);
          if (node.child && node.child.length > 0) {
            traverse(node.child);
          }
        });
      };
      traverse(treeData.value);
      return result;
    },
    // 添加新暴露的方法
    getRootNodeId,
    getRootNodeName,
  });
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .items-center {
    align-items: center;
  }

  .w-full {
    width: 100%;
  }

  .menu {
    white-space: nowrap;
  }
</style>
